<template>
	<view>
		<view v-if="open" class="warp">
			<view class="wrap_view">
				<block v-if="list.length!=0">
					<view v-for="(item,index) in list" :key="item.id">
						<view class="item_padding rowsa rowsm">
							<view @click="choose(index,item.id)" class="mrlef lefticon" :class="{chooseicon:item.isShow}"></view>
							<view class="mrlef fs30">{{item.name}}</view>
						</view>
					</view>
				</block>
				<view v-else class="notYet">暂无数据</view>
			</view>	
			<view class="view_submit tct colfff fs34" @click="submit()">确定</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			welfareList:Array
		},
		data(){
			return{
				list:[],
				open:false,
				backlist:[]//返回的数组
			}
		},
		watch:{
			welfareList(newValue,oldValue){
				if(newValue.length!=0){
					for(let i=0;i<newValue.length;i++){
						let ss = {}
						ss["id"] = newValue[i].id
						ss["name"] = newValue[i].name
						ss["isShow"] = false
						this.list.push(ss)
					}
				}
			}
		},
		methods:{
			choose(index,id){//选择
				this.list[index].isShow = !this.list[index].isShow
				if(this.list[index].isShow){
					this.backlist.push(id)
				}else{
					this.backlist.splice(this.backlist.indexOf(id),1)
				}
			},
			submit(){//
				if(this.backlist.length==0){
					this.$tools.showToast('请选择一项')
				}else{
					this.open = false
					this.$emit('checked',this.backlist.toString());
				}
			},
			toOpen(){
				this.open = true
				console.log(this.backlist)
			}
		}
	}
</script>

<style scoped>
	.warp{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(238,238,238,0.6);
		z-index: 9999;
	}
	.wrap_view{
		width: 600rpx;
		background: #FFFFFF;
		margin: auto;
		position: absolute;
		-webkit-position:absolute;
		left: 0;
		right: 0;
		bottom: 200rpx;
		border-radius: 8upx;
		overflow: hidden;
	}
	.view_submit{
		position: relative;
		width: 600rpx;
		height: 84rpx;
		line-height: 84rpx;
		left: 50%;
		transform: translateX(-50%);
		bottom: 80rpx;
		border-radius: 20upx;
		background-color: #8E8E93;
		position: absolute;
	}
	.item_padding{
		padding: 20rpx 60rpx;
	}
	.mrlef{
		margin-left: 100rpx;
	}
	.lefticon{
		background-image: url(/static/icon/choose1.png);
		width: 40rpx;
		height: 40rpx;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.chooseicon{
		background-image: url(/static/icon/choose2.png);
		width: 40rpx;
		height: 40rpx;
		background-repeat: no-repeat;
		background-size: 100%;
	}
</style>
